<template>
  <div style="padding-left: 50px;">
    <div v-if="!(this.TruckDriver === null)">
      <el-row>
        <el-col :span="24"><h1><i class="el-icon-user"></i>{{ this.state }}{{ user.state.name }}</h1></el-col>
        <el-col :spn="24">
          <el-button type="warning" style="float:right;margin-right:50px;"
                     v-if="this.TruckDriver.task_transport_status === 3" @click="valida()"
                     :disabled="this.TruckDriver.assigned_status === 2 && this.TruckDriver.scheduling_status === 3 ? false : true">确认任务
          </el-button>
          <el-button type="warning" style="float:right;margin-right:50px;"
                     v-if="this.TruckDriver.task_transport_status === 1" @click="dialogFormVisible = true"
                     :disabled="this.TruckDriver.assigned_status === 2 && this.TruckDriver.scheduling_status === 3 ? false : (this.TruckDriver.cargo_picture === null || this.TruckDriver.cargo_picture === '' && this.TruckDriver.cargo_pick_up_picture === null || this.TruckDriver.cargo_pick_up_picture === '' ? false : true)">提货
          </el-button>
          <el-button type="primary" style="float:right;margin-right:50px;"
                     v-if="this.TruckDriver.task_transport_status === 1" @click="starter()"
                     :disabled="this.TruckDriver.cargo_picture === null || this.TruckDriver.cargo_picture === '' && this.TruckDriver.cargo_pick_up_picture === null || this.TruckDriver.cargo_pick_up_picture === '' ? true : false">执行任务
          </el-button>
          <el-button type="success" style="float:right;margin-right:50px;"
                     v-if="this.TruckDriver.task_transport_status === 2" @click="dialogFormVisible_end = true"
                     :disabled="this.TruckDriver.assigned_status === 2 && this.TruckDriver.scheduling_status === 3 ? false : (this.TruckDriver.deliver_picture === null || this.TruckDriver.deliver_picture === '' ? false : true)">到达目的地
          </el-button>
          <el-button type="danger" style="float:right;margin-right:50px;"
                     v-if="this.TruckDriver.task_transport_status === 2" @click="finisher()"
                     :disabled="this.TruckDriver.deliver_picture === null || this.TruckDriver.deliver_picture === '' ? true : false">交付任务
          </el-button>
        </el-col>
      </el-row>
      <el-descriptions title="运输任务信息" direction="vertical" :column="4" border>
        <el-descriptions-item label="运输任务编号">{{ this.TruckDriver.task_transport_id }}</el-descriptions-item>
        <el-descriptions-item label="车次编号">{{ this.TruckDriver.transport_trips_id }}</el-descriptions-item>
        <el-descriptions-item label="任务运输状态" :span="2">
          <el-tag effect="dark"
                  :type="items[this.TruckDriver.task_transport_status === 1 ? 0 : (this.TruckDriver.task_transport_status === 2 ? 1 : (this.TruckDriver.task_transport_status === 3 ? 4 : ''))].type"
                  size="small">
            {{ this.TruckDriver.task_transport_status === 1 ? '待执行' : (this.TruckDriver.task_transport_status === 2 ? '进行中' : (this.TruckDriver.task_transport_status === 3 ? '待确认' : '')) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="分配状态">
          <el-tag effect="dark"
                  :type="items[this.TruckDriver.assigned_status === 1 ? 2 : (this.TruckDriver.assigned_status === 2 ? 0 : (this.TruckDriver.assigned_status === 3 ? 4 : ''))].type"
                  size="small">
            {{ this.TruckDriver.assigned_status === 1 ? '未分配' : (this.TruckDriver.assigned_status === 2 ? '已分配' : (this.TruckDriver.assigned_status === 3 ? '待人工分配' : '')) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="调度状态">
          <el-tag effect="dark"
                  :type="items[this.TruckDriver.scheduling_status === 1 ? 2 : (this.TruckDriver.scheduling_status === 2 ? 4 : (this.TruckDriver.scheduling_status === 3 ? 0 : ''))].type"
                  size="small">
            {{ this.TruckDriver.scheduling_status === 1 ? '待调度' : (this.TruckDriver.scheduling_status === 2 ? '未匹配线路' : (this.TruckDriver.scheduling_status === 3 ? '已调度' : '')) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="车辆装载状态">
          <el-tag effect="dark"
                  :type="items[this.TruckDriver.loading_status === 1 ? 4 : (this.TruckDriver.loading_status === 2 ? 3 : (this.TruckDriver.loading_status === 3 ? 0 : ''))].type"
                  size="small">
            {{ this.TruckDriver.loading_status === 1 ? '半载' : (this.TruckDriver.loading_status === 2 ? '满载' : (this.TruckDriver.loading_status === 3 ? '空载' : '')) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="车牌号">{{ this.TruckDriver.license_plate }}</el-descriptions-item>
        <el-descriptions-item label="线路">{{ this.TruckDriver.transport_line_name }}</el-descriptions-item>
        <el-descriptions-item label="起始地">{{ this.TruckDriver.start_name }}</el-descriptions-item>
        <el-descriptions-item label="目的地">{{ this.TruckDriver.end_name }}</el-descriptions-item>
        <el-descriptions-item label="线路距离">{{ this.TruckDriver.distance }}</el-descriptions-item>
        <el-descriptions-item label="使用费用">{{ this.TruckDriver.cost }}</el-descriptions-item>
        <el-descriptions-item label="预计花费时间">{{ this.TruckDriver.estimated_time }}</el-descriptions-item>
        <el-descriptions-item label="运输周期">{{ this.TruckDriver.period }}</el-descriptions-item>
        <el-descriptions-item label="运输线路名称">{{ this.TruckDriver.transport_line_name }}</el-descriptions-item>
        <el-descriptions-item label="计划出发时间">{{ this.TruckDriver.plan_departure_time }}</el-descriptions-item>
        <el-descriptions-item label="实际出发时间">{{ this.TruckDriver.actual_departure_time }}</el-descriptions-item>
        <el-descriptions-item label="计划到达时间">{{ this.TruckDriver.plan_arrival_time }}</el-descriptions-item>
        <el-descriptions-item label="实际到达时间">{{ this.TruckDriver.actual_arrival_time }}</el-descriptions-item>
        <el-descriptions-item label="计划提货时间">{{ this.TruckDriver.plan_pick_up_goods_time }}</el-descriptions-item>
        <el-descriptions-item label="实际提货时间">{{ this.TruckDriver.actual_pick_up_goods_time }}
        </el-descriptions-item>
        <el-descriptions-item label="计划交付时间">{{ this.TruckDriver.plan_delivery_time }}</el-descriptions-item>
        <el-descriptions-item label="实际交付时间">{{ this.TruckDriver.actual_delivery_time }}</el-descriptions-item>
        <el-descriptions-item label="载货图片">
          <el-image class="imagesy" :src="this.image.cargo_pick_up_picture">
            <div slot="error" class="image-slot" style="color: #99a9bf">
              暂无图片
            </div>
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="货物图片">
          <el-image class="imagesy" :src="this.image.cargo_picture">
            <div slot="error" class="image-slot" style="color: #99a9bf">
              暂无图片
            </div>
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="运输凭证">
          <el-image class="imagesy" :src="this.image.transport_certificate">
            <div slot="error" class="image-slot" style="color: #99a9bf">
              暂无图片
            </div>
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="交付图片">
          <el-image class="imagesy" :src="this.image.deliver_picture">
            <div slot="error" class="image-slot" style="color: #99a9bf">
              暂无图片
            </div>
          </el-image>
        </el-descriptions-item>
      </el-descriptions>
      <div>
        <el-dialog title="提货" :visible.sync="dialogFormVisible">
          <el-form>
            <div>
              <el-form-item label="上传货物装载图片" label-width="100px">
                <el-upload
                  class="avatar-uploader"
                  action="http://192.168.16.43:9999/api/pd-base/truckLicense/uploadFile"
                  :limit="1"
                  :on-success="addHandleAvatarSuccess"
                  :auto-upload="false"
                  ref="uploadAdd1">
                  <el-image v-if="this.image.cargo_pick_up_picture" :src="this.image.cargo_pick_up_picture" class="avatar">
                    <div slot="error" class="image-slot" style="color: #99a9bf">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                  </el-image>
                </el-upload>
              </el-form-item>
              <el-form-item label="上传提货凭证图片" label-width="100px">
                <el-upload
                  class="avatar-uploader"
                  action="http://192.168.16.43:9999/api/pd-base/truckLicense/uploadFile"
                  :limit="1"
                  :on-success="addHandleAvatarSuccess1"
                  :auto-upload="false"
                  ref="uploadAdd2">
                  <el-image v-if="this.image.cargo_picture" :src="this.image.cargo_picture" class="avatar">
                    <div slot="error" class="image-slot" style="color: #99a9bf">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                  </el-image>
                </el-upload>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button @click="uploadFile('start')">上 传</el-button>
            <el-button type="primary" @click="addFile()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div>
        <el-dialog title="交付货物" :visible.sync="dialogFormVisible_end">
          <el-form>
            <div>
              <el-form-item label="上传交付货物图片" label-width="100px">
                <el-upload
                  class="avatar-uploader"
                  action="http://192.168.16.43:9999/api/pd-base/truckLicense/uploadFile"
                  :limit="1"
                  :on-success="addHandleAvatarSuccess2"
                  :auto-upload="false"
                  ref="uploadAdd3">
                  <el-image v-if="this.image.deliver_picture" :src="this.image.deliver_picture" class="avatar">
                    <div slot="error" class="image-slot" style="color: #99a9bf">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                  </el-image>
                </el-upload>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible_end = false">取 消</el-button>
            <el-button @click="uploadFile('end')">上 传</el-button>
            <el-button type="primary" @click="addFile1()">确 定</el-button>
          </div>
        </el-dialog>
      </div><div>
      <el-dialog title="提货" :visible.sync="dialogFormVisible">
        <el-form>
          <div>
            <el-form-item label="上传货物装载图片" label-width="100px">
              <el-upload
                class="avatar-uploader"
                action="http://192.168.16.43:9999/api/pd-base/truckLicense/uploadFile"
                :limit="1"
                :on-success="addHandleAvatarSuccess"
                :auto-upload="false"
                ref="uploadAdd1">
                <el-image v-if="this.image.cargo_pick_up_picture" :src="this.image.cargo_pick_up_picture" class="avatar">
                  <div slot="error" class="image-slot" style="color: #99a9bf">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                </el-image>
              </el-upload>
            </el-form-item>
            <el-form-item label="上传提货凭证图片" label-width="100px">
              <el-upload
                class="avatar-uploader"
                action="http://192.168.16.43:9999/api/pd-base/truckLicense/uploadFile"
                :limit="1"
                :on-success="addHandleAvatarSuccess1"
                :auto-upload="false"
                ref="uploadAdd2">
                <el-image v-if="this.image.cargo_picture" :src="this.image.cargo_picture" class="avatar">
                  <div slot="error" class="image-slot" style="color: #99a9bf">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                </el-image>
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button @click="uploadFile('start')">上 传</el-button>
          <el-button type="primary" @click="addFile()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
      <div>
        <el-dialog title="交付货物" :visible.sync="dialogFormVisible_end">
          <el-form>
            <div>
              <el-form-item label="上传交付货物图片" label-width="100px">
                <el-upload
                  class="avatar-uploader"
                  action="http://192.168.16.43:9999/api/pd-base/truckLicense/uploadFile"
                  :limit="1"
                  :on-success="addHandleAvatarSuccess2"
                  :auto-upload="false"
                  ref="uploadAdd3">
                  <el-image v-if="this.image.deliver_picture" :src="this.image.deliver_picture" class="avatar">
                    <div slot="error" class="image-slot" style="color: #99a9bf">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                  </el-image>
                </el-upload>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible_end = false">取 消</el-button>
            <el-button @click="uploadFile('end')">上 传</el-button>
            <el-button type="primary" @click="addFile1()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div v-if="this.TruckDriver === null">
      <h1><i class="el-icon-user"></i>{{ this.state }}{{ user.state.name }}</h1>
      <h2>暂无任务</h2>
    </div>
  </div>
</template>

<script>
import {
  AddImage,
  findTruck_driverMobileVo,
  finishstatus,
  getUrl,
  startstatus, UpdateOrder_taskById, UpdateOrder_taskById_status, updatetime,
  validationstatus
} from '@/api/Driver_Side/Driver_Side'
import user from '@/store/modules/user'
import { js } from 'js-beautify/js/src'

export default {
  computed: {
    user() {
      return user
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisible_end: false,
      user_id: user.state.id,
      state: '',
      image: null,
      TruckDriver: [],
      items: [
        { type: '' },
        { type: 'success' },
        { type: 'info' },
        { type: 'danger' },
        { type: 'warning' }
      ]
    }
  },
  created() {
    this.init()
  },
  methods: {
    startstatus,
    init() {
      this.getTimeState()
      findTruck_driverMobileVo(this.user_id).then(response => {
        this.TruckDriver = response.data
        this.getimageUrl()
      })
    },
    uploadFile(mase){
      if(mase === 'start'){
        this.$refs.uploadAdd1.submit();
        this.$refs.uploadAdd2.submit();
      }else if(mase === 'end'){
        this.$refs.uploadAdd3.submit();
      }
      this.open_ok("上传成功")
    },
    addFile(){
      const upload = {
        id : this.TruckDriver.task_transport_id,
        cargo_pick_up_picture : this.TruckDriver.cargo_pick_up_picture,
        cargo_picture : this.TruckDriver.cargo_picture
      }
      AddImage(upload).then(response => {
        this.open_ok("提货成功")
        this.dialogFormVisible = false
        this.setTime()
        this.init()
      })
    },
    setTime(){
      const dto = {
        task_transport_id : this.TruckDriver.task_transport_id,
        driver_job_id : this.TruckDriver.driver_job_id
      }
      updatetime(dto)
    },
    addFile1(){
      const upload = {
        id : this.TruckDriver.task_transport_id,
        deliver_picture : this.TruckDriver.deliver_picture
      }
      AddImage(upload).then(response => {
        this.open_ok("交付货物完成")
        this.dialogFormVisible_end = false
        this.init()
      })
    },
    open_ok(maseege) {
      this.$message({
        message: maseege,
        type: 'success'
      });
    },
    open_start(maseege) {
      this.$message({
        message: maseege,
        type: 'warning'
      });
    },
    getTimeState() {
      // 获取当前时间
      let timeNow = new Date()
      // 获取当前小时
      let hours = timeNow.getHours()
      // 设置默认文字
      // 判断当前时间段
      if (hours >= 0 && hours <= 10) {
        this.state = `早上好!`
      } else if (hours > 10 && hours <= 14) {
        this.state = `中午好!`
      } else if (hours > 14 && hours <= 18) {
        this.state = `下午好!`
      } else if (hours > 18 && hours <= 24) {
        this.state = `晚上好!`
      }
    },
    getimageUrl() {
      const images = {
        cargo_pick_up_picture: this.TruckDriver.cargo_pick_up_picture,
        cargo_picture: this.TruckDriver.cargo_picture,
        transport_certificate: this.TruckDriver.transport_certificate,
        deliver_picture: this.TruckDriver.deliver_picture
      }
      getUrl(images).then(response => {
        this.image = response.data
      })
    },
    finisher(){
      const dto = {
        task_transport_id : this.TruckDriver.task_transport_id,
        driver_job_id : this.TruckDriver.driver_job_id
      }
      const orderDto = {
        id : this.TruckDriver.task_transport_id,
        current_agency_id : this.TruckDriver.end_agency_id
      }
      finishstatus(dto).then(response => {
        this.open_start("交付完成")
        UpdateOrder_taskById(orderDto).then(response => {
          this.init()
        })
      })
    },
    starter(){
      const dto = {
        task_transport_id : this.TruckDriver.task_transport_id,
        driver_job_id : this.TruckDriver.driver_job_id
      }
      startstatus(dto).then(response => {
        this.open_start("开始运输")
        this.init()
      })
    },
    valida(){
      const dto = {
        task_transport_id : this.TruckDriver.task_transport_id,
        driver_job_id : this.TruckDriver.driver_job_id
      }
      const orderDto = {
        id : this.TruckDriver.task_transport_id,
        current_agency_id : this.TruckDriver.start_agency_id
      }
      alert(orderDto.current_agency_id)
      validationstatus(dto).then(response => {
        this.open_ok("已确认")
        UpdateOrder_taskById_status(orderDto).then(response => {
          this.init()
        })
      })
    },
    addHandleAvatarSuccess(res) {
      this.TruckDriver.cargo_pick_up_picture = res.data
    },
    addHandleAvatarSuccess1(res) {
      this.TruckDriver.cargo_picture = res.data
    },
    addHandleAvatarSuccess2(res) {
      this.TruckDriver.deliver_picture = res.data
    }
  }
}
</script>

<style scoped lang="scss">
.imagesy {
  height: 80px;
  width: 80px;
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #99a9bf;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
